<template>
	<div class="app-container">
		<!-- <userBox title="我要报修"></userBox> -->
		<div class="app-user-card">
			<div class="app-user-card-items">
				<div class="app-user-card-items-userinfo">
					<div class="app-user-card-items-userinfo-header">
						<img class="avatar" :src="userDetailData.patientGenderStandard == 'W'
              ? imagesRepairUrl + 'avatar/Avatar-02.png'
              : imagesRepairUrl + 'avatar/Avatar-03.png'
              " />
						<span class="name">{{ userDetailData.realName }}</span>
						<div class="tags">
							{{ userDetailData.oneType | filtersUserType }}
						</div>
					</div>
				</div>
				<div class="app-user-card-items-imgs">
					<img :src="imagesRepairUrl + 'health/bg-user.png'" />
				</div>
			</div>
		</div>

		<tabbar></tabbar>
	</div>
</template>

<script>
	import UserBox from './components/userBox.vue'
	/* import {
		getMyProjectList
	} from "@/api/user";
	import {
		parseTime
	} from "@/utils/index";
	import {
		uploadImgRequest,
		uploadVoiceRequest,
		urlTofile
	} from "@/api/upload";
	import {
		queryWorkOrder,
		getMyExeState,
		addWorkOrder
	} from "@/api/workOrder";
	import VoiceBtn from './voiceBtn.vue' */

	import config from '@/configs/index.js'

	export default {
		name: "pages-home",
		components: {
			// UserBox
		},

		data() {
			return {
				imagesRepairUrl: config.IMAGES_URL_YQGJ + 'repair/',
				userDetailData: {},
				/* isShowBind: true,

				fileList: [],
				active: 0,
				active2: 0,
				list: [],
				projectInfo: {},
				projectList: [],
				dataForm: {
					maintenanceUserTel: "",
					projectCode: "",
					projectName: "",
					problemDesc: "",
					problemImgs: [],
					problemType: "",
					urgency: "normal",
					addr: '',
					voicePath: '',
					second: '',
				},
				innerAudioContext: {},
				columns: [],
				mode: "allocation",
				showPicker: false,
				userInfo: {
					realName: "",
					headUrl: "",
					gender: "",
				},
				listQuery: {
					page: 1,
					rows: 20,
					status: "allocation",
				}, */
			};
		},
	};
</script>
<style lang="scss" scoped>
	.fix {
		background: #fff;
	}

	.app-container {
		min-height: 100vh;
		background: #ebeff7;
	}

	.app-user-card {
		border-radius: 16rpx;
		width: 100vw;

		&-items {
			margin-left: 20rpx;
			width: calc(100vw - 40rpx);
			height: calc((100vw - 40rpx) * 0.2);
			overflow: hidden;

			&-userinfo {
				width: calc(100vw - 40rpx);
				height: calc((100vw - 40rpx) * 0.2);
				position: absolute;
				overflow: hidden;
				z-index: 1;

				&-header {
					padding: 20rpx;
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding-top: 28rpx;
					padding-bottom: 16rpx;

					.avatar {
						width: 70rpx;
						height: 70rpx;
						margin-right: 20rpx;
						margin-left: 16rpx;
					}

					.name {
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}

					.tags {
						background: #c5d6ee;
						font-size: 24rpx;
						padding: 0rpx 12rpx;
						height: 40rpx;
						border-radius: 18rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #fff;
					}
				}

				&-bodyer {
					display: flex;
					align-items: center;
					justify-content: flex-start;
					padding: 20rpx;

					.item {
						margin-left: 20rpx;
						width: 160rpx;

						span {
							color: #888888;
							font-size: 24rpx;
							display: block;
							margin-bottom: 4%;
						}

						p {
							font-size: 32rpx;
							margin: 0rpx;
						}
					}
				}
			}

			&-imgs {
				width: calc(100vw - 40rpx);
				position: absolute;
				height: calc((100vw - 40rpx) * 0.2);
				overflow: hidden;

				img {
					width: calc(100vw - 40rpx);
					height: calc((100vw - 40rpx) * 0.2);
				}
			}
		}
	}

	.task-box {
		margin: 40rpx 20rpx;

		&-title {
			font-weight: bold;
		}
	}

	.task-list {
		margin: 20rpx;

		&-item {
			padding: 20rpx;
			border-radius: 16rpx;
			background: #fff;
			margin-bottom: 28rpx;

			&-header {
				display: flex;
				align-items: center;
				justify-content: space-between;

				&-status {
					width: 20vw;
				}

				&-info {
					flex: 1;

					.time {
						font-size: 24rpx;
						color: #888888;
						margin-bottom: 12rpx;
					}

					.title {
						font-size: 28rpx;
						font-weight: bold;
					}
				}
			}

			&-bodyer {
				margin-top: 20rpx;

				&-remark {
					margin: 20rpx 0rpx;
					font-size: 24rpx;
					color: #888888;
				}

				&-box {
					padding: 20rpx 16rpx;
					background: #f5f7fb;
					display: flex;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;

					.item {
						width: 32%;

						.des {
							font-size: 24rpx;
							color: #888888;
							margin-bottom: 8rpx;
							text-align: center;
						}

						.text {
							text-align: center;
							font-size: 28rpx;
						}
					}
				}
			}
		}
	}

	.online {
		padding: 20rpx;
	}

	.tips {
		color: #888888;
		background: #e2e2e2;
		padding: 28rpx;

		font-size: 28rpx;
		border-top-left-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		background-image: linear-gradient(90deg,
				#e1e9f8,
				/* #不写px 直接默认平均分配 */
				#fff);
	}

	.content {
		background: #f8f8f8;
		padding: 28rpx;
		border-radius: 20rpx;

		h4 {
			font-size: 30rpx;
			margin-top: 20rpx;
		}
	}

	.content-phone {
		background: #f8f8f8;
		border-radius: 20rpx;
		padding: 28rpx;
		display: flex;
		align-items: center;
		margin: 28rpx 0;

		h4 {
			font-size: 30rpx;
			margin: 0rpx;
			margin-right: 20rpx;
			width: 160rpx;
		}

		.van-cell {
			flex: 1;
		}
	}

	.btn {
		color: #fff;
		background: #274cda;
		height: 80rpx;
		font-size: 30rpx;
		border-radius: 16rpx;
		margin-top: 28rpx;
	}

	.btn1 {
		width: 75%;
	}

	.btn2 {
		width: 20%;
	}

	.telIcon {
		width: 50rpx;
		height: 50rpx;
	}

	.imgs {
		width: 100%;
		margin-top: 44rpx;
		display: block;
	}

	.mp3Box {
		width: 200rpx;
		height: 70rpx;
		background-color: #43e97b;
		font-size: 28rpx;
		border-radius: 12rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin: 0 20rpx;
		}
	}
</style>

<style>
	.u-input {
		z-index: 0;
	}

	.item_actived p {
		color: #1989fa;
	}
</style>